<template>
  <div class="themes">
    <div class="title">Hackathon Themes</div>
    <div class="list">
      <div v-for="(item, index) in themeList" :key="index" class="item">
        <div class="item-theme">{{ item.theme }}</div>
        <div v-for="(ele, i) in item.content" :key="i" class="item-info">
          {{ ele.id ? ele.id + '. ' : '' }}
          <span class="info-bold">{{ ele.bold }}</span>
          {{ ele.text }}
        </div>
      </div>
    </div>
    <img src="@/assets/images/pc_mentors_corner1.png" alt="" class="mentors-corner1">
    <img src="@/assets/images/pc_mentors_corner2.png" alt="" class="mentors-corner2">
    <img src="@/assets/images/pc_border.png" alt="" class="price-border-pc">
    <img src="@/assets/images/m_border.png" alt="" class="price-border-m">
  </div>
</template>

<script setup>
import { ref } from 'vue'

const themeList = ref([
  {
    theme: 'Theme1: Infrastucture',
    content: [{
      id: 1,
      bold: 'Scalability challenges:',
      text: 'Developing solutions to increase the transaction throughput and processing capability of blockchain networks to achieve efficient large-scale transaction processing and data storage.'
    }, {
      id: 2,
      bold: 'Security and privacy protection:',
      text: 'Constructing blockchain infrastructure with heightened security and privacy measures to ensure the safety of participants\' data and transactions and provide anonymity protection for users.'
    }, {
      id: 3,
      bold: 'Decentralized identity authentication:',
      text: 'Designing innovative decentralized identity verification mechanisms to ensure the verification of participants\' identities and the accuracy of data, offering users a convenient and secure identity authentication solution.'
    }, {
      id: 4,
      bold: 'Cross-chain interoperability:',
      text: 'Building solutions that support interoperability across different blockchain platforms, enabling seamless flow of assets and data, and promoting interconnectedness between different blockchain ecosystems.'
    }]
  }, {
    theme: 'Theme 2: Web3 Dapps',
    content: [{
      id: 1,
      bold: 'RWA & RWAFi:',
    }, {
      text: 'Participants can explore the following areas:',
    }, {
      id: 1,
      bold: 'Digitalization and securitization of RWA:',
      text: 'Investigate how to digitize real-world assets and transform them into encrypted assets for easier management and trading.'
    },{
      id: 2,
      bold: 'Decentralized trading of RWA:',
      text: 'Design decentralized trading platforms or protocols, allowing investors to directly participate in the trading of real-world assets, achieving higher liquidity and accessibility.'
    },{
      id: 3,
      bold: 'Identity and verification of RWA:',
      text: 'Research and implement trustworthy identity verification solutions for RWA to ensure the authenticity and ownership of assets.'
    },{
      id: 4,
      bold: 'Measurement and valuation of RWA:',
      text: 'Explore how to accurately measure and value real-world assets, providing investors with reliable references and decision-making bases.'
    }, {
      id: 2,
      bold: 'LSD & LSDFi:'
    }, {
      text: 'Participants can delve into the following areas:'
    }, {
      id: 1,
      bold: 'LSDFi protocols and platforms:',
      text: 'Design and build protocols or platforms that support LSDFi, allowing users holding POS tokens to connect their collateral liquidity with the DeFi ecosystem.'
    },{
      id: 2,
      bold: 'Tokenization of liquidity:',
      text: 'Investigate how to transform POS tokens into liquidity tokens for trading in liquidity pools, and earn profits through rewards for liquidity providers.'
    },{
      id: 3,
      bold: 'LSDFi strategies and tools:',
      text: 'Design strategies and tools for users offering LSDFi, providing methods to maximize profits and manage risks.'
    },{
      id: 4,
      bold: 'Cross-chain LSDFi:',
      text: 'Contemplate how to foster cross-chain interoperability of LSDFi among different blockchain networks, facilitating the liquidity collateral and trading of different POS tokens.'
    }]
  }
])
</script>

<style lang="scss" scoped>
  .themes{
    margin-top: 160px;
    position: relative;
    .title{
      font-size: 90px;
      line-height: 108px;
      color: #5CD848;
      text-align: center;
      font-family: poppins-bold;
    }
    .list{
      margin-top: 79px;
      .item{
        .item-theme{
          color: #5CD848;
          font-size: 40px;
          line-height: 48px;
          font-family: PingFangSC-Regular;
          margin-top: 40px;
        }
        .item-info{
          font-size: 20px;
          color: #D5D5D5;
          line-height: 44px;
          margin-top: 15px;
          .info-bold{
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
    .mentors-corner1{
      position: absolute;
      right: -250px;
      top: 0;
    }
    .mentors-corner2{
      position: absolute;
      left: -250px;
      bottom: 100px;
    }
    .price-border-pc{
      // height: 0px;
      width: 1616px;
      // border-top: 1px dashed #fff;
      margin: 100px -218px 0;
    }
    .price-border-m{
      display: none;
    }
  }
  @media screen and (max-width: 1180px) {
    .themes{
      margin-top: 100px;
      .title{
        margin-left: -10px;
        margin-right: -10px;
        font-size: 32px;
        line-height: 38px;
      }
      .list{
        margin-top: 0;
        .item{
          .item-theme{
            font-size: 18px;
            line-height: 22px;
            margin-top: 37px;
          }
          .item-info{
            font-size: 14px;
            line-height: 28px;
            margin-top: 12px;
          }
        }
      }
      .mentors-corner1{
        width: 54px;
        height: 54px;
        top: -54px;
        right: -24px;
      }
      .mentors-corner2{
        width: 54px;
        height: 54px;
        left: -10px;
        bottom: 30px;
      }
      .price-border-pc{
        display: none;
      }
      .price-border-m{
        display: block;
        width: 327px;
        margin: 100px auto 0;
        // height: 0px;
        // width: 100%;
        // border-top: 1px dashed #fff;
        // margin: 50px auto;
      }
    }
  }
</style>